<!--  -->
<template>
  <div class='backstage'>
    <div class="backstage_mainBox" v-if="tabType != 'router'">
      <div v-for="(item,index) in routerListForButton" :key="item.id" :class="['backstage_boxs',item.pageUp?'active':'']">
          <!-- <Icon :type="item.pageUp?'ios-arrow-down':'ios-arrow-up'" @click="pagesFold(item,index)" v-if="item.childPermission.length>0" class="backstage_boxs_firstUp" /> -->
          <Icon type="ios-arrow-down" @click="pagesFold(item,index)" v-if="item.childPermission.length>0" class="backstage_boxs_firstUp" />
          <h2><Checkbox v-model="item.selected" @on-change="checkboxed(item)" class="firstCheckbox"></Checkbox>{{item.permissionTitle}}</h2>  
          <div v-for="it in item.childPermission" :key="it.id" class="backstage_boxs_thirsBox">
             <h3 class="backstage_boxs_titleSecond"><Checkbox v-model="it.selected" @on-change="checkboxed(it)" class="secondCheckbox"></Checkbox>{{it.permissionTitle}}</h3> 
             <Divider v-if="it.childPermission && it.childPermission.length>0" :dashed="true" />
             <div class="backstage_boxs_thirsBox_allselected" v-if="it.childPermission && it.childPermission.length>0">
                 <span class="backstage_boxs_thirsBox_allselectedMess">全选</span>
                 <Checkbox @on-change="checkboxAlled(it)"></Checkbox>
             </div>
             <span class="backstage_boxs_spans" v-for="mess in it.childPermission" :key="mess.id"><Checkbox v-model="mess.selected" @on-change="checkboxed(mess)"></Checkbox>{{mess.permissionTitle}}</span>
          </div>
      </div>
    </div>
    <div class="backstage_footTabs">
        <span class="backstage_footTabs_sure">保存</span>
        <span class="backstage_footTabs_clear">清空</span>
    </div>
  </div>
</template>

<script>

export default {
components: {},
data() {
return {

};
},
computed: {},
watch: {},
methods: {

},
created() {

},
mounted() {

},
}
</script>
<style lang='scss' scoped>
 .backs{
    max-height: 100%;
    overflow-y: auto;
    height: 100%;
 .backstage{
    padding:0 24px;
    height: calc(100% - 15px);
    /deep/.ivu-divider-horizontal{
      margin: 12px 0;  
    }
    &_mainBox{
      max-height: calc(100% - 32px);
      overflow-y: auto;  
    }
    &_mess{
        margin-right: 20px;
    }
    &_tabs{
      width: 260px;
      height: 32px;
      background: #f2f4f7;
      border-radius: 16px;
      color: #000;
      display: inline-block;
      &_left{
        width: 130px;
        height: 32px;
        display: inline-block;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
      }
      &_left.active{
        background: #ffffff;
        border: 1px solid #2298ff;
        border-radius: 16px; 
        color: #0088FF;
        font-weight: 700; 
      }
    }
    &_title{
        text-align: center;
        margin-bottom: 15px;
        &_switch{
          float: left;  
        }
    }
    &_boxs.active{
      height: 71px!important;
      .backstage_boxs_firstUp{
        transform: rotate(180deg);  
      }
    }
    &_boxs{
      background: #ffffff;
      border-radius: 2px;
      box-shadow: 0px 0px 6px 0px rgba(38,42,45,0.08);  
      margin: 5px 0; 
      padding: 20px 0 20px 30px;
      position: relative;
      transition: all .5s;
      overflow: hidden;
      &_spans{
        display: inline-block;
        width: 140px;
        line-height: 24px;
        margin-bottom: 10px;
      }
     &_titleSecond{
      font-weight: 700;
      margin-top: 18px;   
     }
     &_thirsBox{
       position: relative;
       &_allselected{
         position: absolute;
         right: 9px;
         top: 13px;
       }
       &_allselectedMess{
           margin-right: 4px;
       } 
     }
     &_firstUp{
        //color: #ccc; 
        position: absolute;
        right: 20px;
        top: 25px;
        cursor: pointer; 
        transform: rotate(0deg);
        transition: all .5s;
     }  
    }
    &_footTabs{
      margin-top: 14px;
      padding: 20px 0;
      text-align: center;
      background: #f0f2f5;
      width: 100%;
      bottom: 0;
      position: absolute;
      &_sure{
       width: 140px;
       height: 34px;
       background: #2298ff;
       border-radius: 2px;
       margin-right: 20px;
       color: #fff;
       text-align: center;
       line-height: 34px;
       display: inline-block;
      }
      &_clear{
        width: 120px;
        height: 34px;
        background: #ffffff;
        border: 1px solid rgba(0,0,0,0.1);
        border-radius: 2px;
        text-align: center;
       line-height: 34px;
       display: inline-block;
      }
    }
    .firstCheckbox{
       float: left;
       margin-top: 6px; 
    }
    .secondCheckbox{
       float: left;
    }
  }
}
  
</style>